<template>
  <div class="login-container">
    <van-nav-bar
  class="app-nav-bar"
  title="注册/登录"
  left-arrow
  @click-left="$router.back()"
/>
<!-- 登录表单 -->
<van-cell-group>
  <van-field
    v-model="user.mobile"
    left-icon="phone"
    right-icon="warning-o"
    placeholder="请输入手机号"
  />
  <van-field
    v-model="user.code"
    clearable
    left-icon="map-marked"
    placeholder="请输入验证码"
  >
  <template #button>
    <van-button size="small"
    class="send-btn"
    round
    >获取验证码</van-button>
  </template>
</van-field>
</van-cell-group>
<!-- from表单元素 -->
<div class="login-btn-wrap">
  <van-button
   class="login-btn"
   type="primary"
   block
   @click="$router.back()"
   >登录</van-button>
</div>
<!-- 大号按钮改变其状态变为block -->
  </div>
</template>
<script>
import { login } from '@/api/user'
import { Toast } from 'vant'
export default {
  name: 'loginIndex',
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码
      }
    }
  },
  method: {
    async onLogin () {
      Toast.loading({
        message: '登陆中...', // 提示文本
        forbidClick: true, // 禁用背景点击
        toration: 0
      })
      try {
      // 1.找到数据接口
      // 2.封装请求方法
      // 3.请求调用登录
        const res = await login(this.user)
        console.log(res)
      // 4.处理相应结果
      } catch (err) {
        console.log(err)
        console.log('登陆失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.login-container {
  .send-btn {
    width: 2.0rem;
    height: 0.5rem;
    background-color: #ededed;
    .van-button__text {
      font-size: 11px;
      color: #666666;
    }
  }
}
.login-container {
  .login-btn-wrap {
    padding: 0.7rem 0.3rem;
    .login-btn {
      background-color: #6db4fd;
      border: none;
    }
    .van-button__text{
      font-size: 15px
    }
  }
}
</style>
